import React, { Component, Fragment } from 'react'
import { BackTop } from 'antd'
import { connect } from 'react-redux'
import { actionCreater } from './store'
import Header from '../../common/header'
import { DetailWrapper, Title, Author, Content, Support } from './style.js'
class Detail extends Component{
    componentWillMount(){
        this.props.getDetailData(this.props.match.params.id)
    }
    render(){
        const {autherInfo, contentInfo} = this.props;
        return(
            <Fragment>
               <Header></Header>
               <DetailWrapper>
                   <Title>{autherInfo.get('title')}</Title>
                   <Author>
                       <img className= 'author-img' src= {autherInfo.get('urlImg')} alt= '' />
                        <div className= 'author-info'>
                            <div className= 'title-name'>
                                <span className= 'author-name'>{autherInfo.get('authorName')}</span>
                                <span className= 'author-btn'>关注</span>
                            </div>
                            <div className= 'meta'>
                                <span className= 'publish-time'>{autherInfo.get('publishTime')}</span>
                                <span className= 'wordage'>字数 {autherInfo.get('wordAge')}</span>
                                <span className= 'views-count'>阅读 {autherInfo.get('viewsCount')}</span>
                                <span className= 'contents-count'>评论 {autherInfo.get('contentsCount')}</span>
                                <span className= 'likes-count'>喜欢 {autherInfo.get('likesCount')}</span>
                            </div>
                        </div>
                        
                   </Author>
                    {
                        contentInfo.map((items) => {
                          return(
                         <Content key= {items.get('id')}> 
                           <img className= 'content-img' src={items.get('urlImg')} alt= ''/>
                           <p>
                             <b>{items.get('contentTitle')}</b>
                          </p>
                           <p>{items.get('content')}</p>
                         </Content>
                          )
                        })
                    }
                     
                     <Support>
                       <div className='support-author'>用心撰文，打赏随心！</div>
                       <div className= 'btn-pay'>赞赏支持</div>
                     </Support>
                     <BackTop></BackTop>
               </DetailWrapper>
            </Fragment>
        )
    }
}

const mapState = (state) => {
    return{
        autherInfo: state.getIn(['detail', 'autherInfo']),
        contentInfo: state.getIn(['detail','contentInfo'])
    }
}
const mapDispath = (dispatch) => ({
    getDetailData(id){
      dispatch(actionCreater.changeDetailData(id))
    }
})
export default connect(mapState, mapDispath)(Detail);